<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id ="app">

        <com-a></com-a>
        <hr>
        <com-b></com-b>
        <hr>
        <com-c></com-c>

        <hr>
        <hello-world></hello-world>
        <hello-world />
    </div>

    <script>



let comC={
    template:'<div>我是局部组件c</div>'
}
let comA={
    template:'<div>我是局部组件a</div>'
}

let comB={
    template:'<div>我是局部组件b</div>'
}


let HelloWorld={
    template:'<div> 我是一个全局组件  </div>'

}

Vue.component('HelloWorld',HelloWorld)



     //创建Vue实例,得到 ViewModel
     var vm = new Vue({
        el: '#app',
        data: {},
        methods: {},

        components:{
            // 'comA':{
            //     template:'<div>我是局部组件a</div>'
            // },
            // 'comB':{
            //     template:'<div>我是局部组件b</div>'
            // },
            // 'comC':comC
            comA,
            comB,
            comC

        }
     });
    </script>
</body>

</html>